<!DOCTYPE html>
<html>
<head>
  <title>计算器</title>
  <style>
    .calculator {
      width: 300px;
      margin: 20px auto;
      padding: 20px;
      background: #f0f0f0;
      border-radius: 10px;
    }
    #display {
      width: 100%;
      height: 60px;
      margin-bottom: 10px;
      text-align: right;
      font-size: 24px;
      padding: 10px;
      box-sizing: border-box;
      background: white;
      border: none;
      border-radius: 5px;
    }
    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    button {
      padding: 20px;
      font-size: 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      background: #e0e0e0;
    }
    button:hover {
      background: #d0d0d0;
    }
    /*.operator { background: #ff9500; color: white; }*/
    /*.clear { background: #ff3b30; color: white; }*/
    .equals { background: #109024; color: white; }
  </style>
</head>
<body>
<div class="calculator">
  <input type="text" id="display" readonly>
  <div class="buttons">
    <!-- 第一行：7 8 9 + -->
    <button onclick="appendNumber('7')">7</button>
    <button onclick="appendNumber('8')">8</button>
    <button onclick="appendNumber('9')">9</button>
    <button class="operator" onclick="setOperator('+')">+</button>
    <!-- 第二行：4 5 6 - -->
    <button onclick="appendNumber('4')">4</button>
    <button onclick="appendNumber('5')">5</button>
    <button onclick="appendNumber('6')">6</button>
    <button class="operator" onclick="setOperator('-')">-</button>
    <!-- 第三行：1 2 3 × -->
    <button onclick="appendNumber('1')">1</button>
    <button onclick="appendNumber('2')">2</button>
    <button onclick="appendNumber('3')">3</button>
    <button class="operator" onclick="setOperator('*')">*</button>
    <!-- 第四行：C 0 = ÷ -->
    <button class="clear" onclick="clearDisplay()">C</button>
    <button onclick="appendNumber('0')">0</button>
    <button class="equals" onclick="calculate()">=</button>
    <button class="operator" onclick="setOperator('/')">/</button>
  </div>
</div>

<script>
  let currentValue = '';
  let firstOperand = null;
  let operator = null;

  function updateDisplay() {
    document.getElementById('display').value = currentValue || '0';
  }

  function appendNumber(num) {
    currentValue += num;
    updateDisplay();
  }

  function setOperator(op) {
    if (currentValue !== '') {
      firstOperand = parseInt(currentValue);
      operator = op;
      currentValue = '';
    } else if (firstOperand !== null) {
      operator = op; // 允许更换运算符
    }
  }

  function calculate() {
    if (!operator || firstOperand === null || currentValue === '') return;

    const secondOperand = parseInt(currentValue);
    let result;

    switch(operator) {
      case '+':
        result = firstOperand + secondOperand;
        break;
      case '-':
        result = firstOperand - secondOperand;
        break;
      case '*':
        result = firstOperand * secondOperand;
        break;
      case '/':
        if (secondOperand === 0) {
          currentValue = '除0错误';
          updateDisplay();
          setTimeout(clearDisplay, 1000);
          return;
        }
        result = firstOperand / secondOperand;
        break;
    }

    currentValue = result.toString();
    firstOperand = result; // 结果作为下一次运算的第一个数
    operator = null;
    updateDisplay();
  }

  function clearDisplay() {
    currentValue = '';
    firstOperand = null;
    operator = null;
    updateDisplay();
  }

  // 初始化显示
  updateDisplay();
</script>
</body>
</html>